<template>
	<div class="header">
		<div class="menu-div wrap displaynone">
			<div class="menu-div-close" @click="hideMenu()">×</div>
			<ul>
				<router-link :to="setPath(item.url, item.code)" v-for="item in menus" @click.native="hideMenu(item)">
					<li>{{item.name}}</li>
				</router-link>
			</ul>
		</div>
		<div class="header-top">
			<router-link :to="path">
				<img class="header-logo" :src="url">
			</router-link>
			<div class="header-icon" @click="showMenu()">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="menu">
			<div id="wrapper">
				<div id="scroller">
					<ul>
						<router-link :to="setPath(item.url, item.code)" @click.native="changeMenu(item)" v-for="item in menus">
							<li>{{item.name}}</li>
							<!--<li v-for="item in menus" @click="toList">{{item.name}}</li>-->
						</router-link>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	import router from 'vue-router'
	import store from '@/store'
	import $ from 'jquery'
	export default {
		name: 'header',
		data() {
			return {
				url: store.state.StaticStore.baseUrl + '/public/images/m/phone-logo.png',
				path: '/'
			}
		},
		computed: {
			...mapState({
				menus: state => state.MenuStore.menus
			})
		},
		methods: {
			...mapMutations([
			]),
			...mapActions([
				'getMenuData'
			]),
			setPath: function(url, code) {
				if(url == '') {
					return '/index'
				}
				return '/' + code
			},
			changeMenu: function(menu) {
				this.initScroller()
				store.commit("changeMenu", menu)
			},
			showMenu: function() {
				$(".header-icon").fadeOut(200, function() {
					$(".header-icon").fadeIn(200)
					$(".menu-div").fadeIn(200)
					//禁止滑动
					$("body").on("touchmove", function(event) {
						event.preventDefault;
					}, false)
				})
			},
			hideMenu: function(menu) {
				$(".menu-div").fadeOut(200)
				//解除禁止
				$("body").off("touchmove")
				this.changeMenu(menu)
			},
			initScroller: function() {
//				myScroll.refresh();
//				var elem = $(".active")[0]
//				$(elem).parents("menu").css("background", "red")
//				console.log("html==",$(elem).width())
//				var x = $(elem).offset().left - ($(window).width() - $(elem).width()) / 2
//				if (x > $(elem).parents("ul").outerWidth() - $(window).width()) {
//					x = $(elem).parents("ul").outerWidth() - $(window).width()
//				}
//				if (x > 0) {
//					myScroll.scrollTo(-90, 0, 0)
//				}
//				console.log(x)
			}
		},
		mounted: function() {
//			console.log("abcd", store.state.StaticStore.baseUrl)
			this.getMenuData()
		}

	}
</script>

<style>
	.router-link-exact-active li,
	.active li {
		color: #007ABC;
	}
</style>